<template>
	<view class="wrap flex column align-center safe-area">
		<publishCommonArticle v-if="article_id" :article_id="article_id" :user_id="user_id" />

		<view class="wrap-top-content" v-if="list.length > 0">
			<view class="item flex align-center just-between">
				<view class="left f-30">置顶分类</view>

				<view class="right flex align-center just-end f-30">
					{{ cateTitle }}
				</view>
			</view>

			<view class="item flex align-center just-between">
				<view class="left f-30">置顶时间</view>

				<view class="right flex align-center just-end">
					<block v-for="(item, index) in list" :key="index">
						<view class="group flex align-center" @click="current = index">
							<view class="choose">
								<image v-if="index === current" :src="$staticImagePath('common/choose_select.png')" />
								<image v-else :src="$staticImagePath('common/choose_normal.png')" />
							</view>

							<view class="f-30">{{ item.day }}天</view>
						</view>
					</block>
				</view>
			</view>

			<view class="item flex align-center just-between">
				<view class="left f-30">置顶时间段</view>

				<view class="right flex align-center just-end f-30">
					{{ list[current].top_starttime }}至{{ list[current].top_endtime }}
				</view>
			</view>

			<view class="item flex align-center just-between">
				<view class="left f-30">应付金额</view>

				<view class="right flex align-center just-end f-30 price">
					{{ list[current].money }}
				</view>
			</view>
		</view>

		<view class="sure theme-gradient-btn f-34" @click="pay"> 支付并置顶 </view>
	</view>
</template>

<script>
	import { topsetList, topArticle } from "@/API/article.js";
	import publishCommonArticle from "@/components/publishCommonArticle/publishCommonArticle.vue";

	export default {
		components: {
			publishCommonArticle,
		},
		data() {
			return {
				article_id: "", //文章ID
				cateTitle: "", //置顶分类

				list: [], //时长列表
				current: 0, //当前
			};
		},
		onLoad(options) {
			this.article_id = options.id;

			this.getData();
		},
		methods: {
			/**
			 * 支付
			 */
			pay() {
				topArticle({
					article_id: this.article_id,
					topset_id: this.list[this.current].id,
					addorder: 1,
					order_type: "top",
				}).then((res) => {
					uni.navigateTo({
						url: "/pages/user/money/pay?token=" + res.data.token + "&data=" + JSON.stringify(res.data.list),
					});
				});
			},
			/**
			 * 网络请求
			 */
			getData() {
				topsetList(this.article_id).then((res) => {
					this.cateTitle = res.data.cate;
					this.list = res.data.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 20rpx;
		box-sizing: border-box;
		gap: 20rpx;

		.wrap-top-content {
			width: 100%;
			background-color: white;
			overflow: hidden;
			border-radius: 16rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.item {
				padding: 40rpx 0rpx;
				width: 100%;
				overflow: hidden;
				border-bottom: 2rpx solid #eeeeee;
				gap: 20rpx;

				&:last-child {
					border-bottom: none;
				}

				.left {
					color: #121212;
				}

				.right {
					flex: 1;
					overflow: hidden;
					color: #666666;
					gap: 40rpx;

					.group {
						overflow: hidden;
						gap: 20rpx;

						.choose {
							width: 40rpx;
							height: 40rpx;

							> image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				.price {
					color: #eb5c20 !important;
				}
			}
		}

		.sure {
			margin-top: 200rpx;
		}
	}

	.publishPickets {
		padding: 20rpx;

		.pickets {
			margin-top: 20rpx;
			background-color: white;
			border-radius: 16rpx;
			padding: 20rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 10rpx;
				margin-bottom: 20rpx;
				padding-bottom: 10rpx;
				border-bottom: 1px solid #ededed;
				&:last-child {
					border-bottom: 0;
					margin-bottom: 0;
				}

				radio-group {
					display: flex;
					align-items: center;
					gap: 20rpx;

					radio {
						transform: scale(0.7);
						margin-right: 5rpx;
					}
				}

				input {
					flex: 1;
					font-size: 28rpx;
					color: #333;
				}

				text {
					font-size: 28rpx;
					color: #333;
				}
			}

			.pay {
				text {
					font-size: 28rpx;
					color: #eb5c20;
				}
			}
		}

		.btn {
			width: 80%;
			height: 80rpx;
			background: linear-gradient(90deg, #dd551b, #f49355);
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 26rpx;
			position: fixed;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>
